<template>
  <page-loading :show="pageLoading">
    <view>
      <view class="container" v-if="info.brand_Name">
        <view class="header">
          <view class="header-left">
            <i-icon
              :icon="statusIcon[info.quote_Status]"
              type="single"
              size="34rpx"
              color="#333"
            ></i-icon>
            <text>{{ status[info.quote_Status] }}</text>
          </view>
          <view class="header-right"> </view>
        </view>

        <!-- 车型模块 -->
        <view class="order">
          <view class="item flex">
            <view class="item-left">车型：</view>
            <view class="item-right name"
              >{{ info.brand_Name }} {{ info.car_Type_Name }}
              {{ info.configuration_Name }}</view
            >
          </view>
          <view class="item flex vin" v-if="info.vin_No">
            <view class="item-left">VIN:</view>
            <view class="item-right">{{ info.vin_No }}</view>
          </view>
          <view class="item flex">
            <view class="item-left">询价主体：</view>
            <view class="item-right">
              <text>{{ info.store_Name }}</text>
              <i-icon
                v-if="info.store_Status"
                class="icon-store"
                icon="iconmendianrenzheng"
                type="single"
                size="32rpx"
                color="#60C534"
              ></i-icon>
              <i-icon
                v-if="info.deposit_Balance > 0"
                class="icon-store"
                icon="iconbao_1"
                type="single"
                size="28rpx"
                color="#eb5c02"
              ></i-icon>
            </view>
          </view>
          <view class="item flex">
            <view class="item-left">联系人：</view>
            <view class="item-right">{{ formatName }}</view>
          </view>
          <view class="item flex">
            <view class="item-left">联系电话：</view>
            <view class="item-right flex flex-jc-sb">
              <text>{{ formatPhone }}</text>
              <text class="phone-tip">报价后可见联系买方</text>
            </view>
          </view>
          <view class="item flex">
            <view class="item-left">收货地址：</view>
            <view class="item-right"
              >{{ info.receiver_Address_Json.province
              }}{{ info.receiver_Address_Json.city
              }}{{ info.receiver_Address_Json.district
              }}{{ info.receiver_Address_Json.address }}</view
            >
          </view>
          <view class="item flex">
            <view class="item-left">询价日期：</view>
            <view class="item-right">{{ dateFormat(info.addTime) }}</view>
          </view>
          <view class="item flex">
            <view class="item-left">截至日期：</view>
            <view class="item-right">{{
              dateFormat(info.effective_Time)
            }}</view>
            <view class="last-time">
              {{ remainder }}
            </view>
          </view>
          <view class="item flex">
            <view class="item-left">发票信息：</view>
            <view class="item-right">{{
              info.is_Need_Invoice ? '需开发票' : '不需开票'
            }}</view>
          </view>
        </view>

        <!-- 询价清单 -->
        <view
          class="enMolder-item boxS"
          v-for="(item, index) in info.carPartDetails"
          :key="index"
        >
          <view class="enMolder-head" v-if="index === 0">询价清单</view>
          <view class="enMolder1">
            <view class="en-left">
              <view class="en-left-num">
                <view class="en-num">{{ index + 1 }}</view>
              </view>
              <view class="en-name">{{ item.part_Category_Name }}</view>
            </view>
            <view class="en-right">x{{ item.purchase_Number }}</view>
          </view>
          <view class="enMolderImg" v-if="item.images">
            <image
              v-for="img in handdleImg(item.images)"
              :key="img"
              :src="img"
            ></image>
          </view>
          <view class="enMolder2">
            <view class="en-left">说明:</view>
            <view class="en-right text-line2">{{ item.explain_Text }}</view>
          </view>
          <view class="qualitybox">
            <view class="quality">
              <view class="quaname">品质: </view>
              <view class="quboxs">
                <view
                  :class="i === item.character_type ? 'weuixuan' : 'xuanzhong'"
                  v-for="(name, i) in quality"
                  :key="i"
                  @click="selectQuality(i, index)"
                >
                  {{ name }}
                </view>
              </view>
            </view>
          </view>
          <view class="enMolderfooter">
            <view class="enMolderfooter-left">我的报价:</view>
            <view class="enMolderfooter-right">
              <input
                placeholder="请输入商品单价"
                maxlength="7"
                @blur="verifyImput($event, index)"
                v-model="item.offer_price"
                type="number"
                style="font-size: 32rpx; text-align: right"
              /><text style="margin-left: 17rpx; font-weight: 500">元</text>
            </view>
          </view>
        </view>

        <view class="boajiaxinxi boxS">
          <view class="bao-item">
            <view class="bao-l">报价联系人</view>
            <view class="bao-r" @click="selContact">
              {{ contactName }}
              <text class="place-hodle" v-show="!contactName">报价联系人</text>
              <u-icon
                name="arrow-right"
                color="#999"
                size="16rpx"
                class="pl-15"
              ></u-icon>
            </view>
          </view>
          <view class="bao-item">
            <view class="bao-l">运费价格</view>
            <view class="bao-r">
              <input
                placeholder="请输入金额"
                maxlength="7"
                type="number"
                @blur="verifyFreight"
                v-model="freightPrice"
                style="text-align: right; font-size: 32rpx; color: #eb5c02"
              /><text class="pl-15" style="font-weight: 500; color: #eb5c02"
                >元</text
              >
            </view>
          </view>
          <view class="bao-item">
            <view class="bao-l">报价有效期</view>
            <view class="bao-r" @click="selDate">
              {{ chooserTime }}
              <text class="place-hodle" v-show="!chooserTime">请选择天数</text>
              <u-icon
                class="pl-15"
                name="arrow-down-fill"
                color="#999"
                size="20rpx"
              ></u-icon>
            </view>
          </view>
        </view>

        <view class="boxS" style="margin-top: 22rpx; padding: 24rpx">
          <textarea
            placeholder="请输入备注信息"
            v-model="remarks"
            maxlength="200"
          ></textarea>
        </view>
        <!-- 已报价 -->
        <view class="footer1" v-if="type === '0'">
          <button class="footbox" @click="submit">
            <view class="wanc"> 完成报价 </view>
            <view class="fangshi"> 报价后可见寻件方联系方式 </view>
          </button>
        </view>
        <view class="btn-wrap flex" v-else-if="info.quote_Status !== 25">
          <button class="btn" @click="submit">完成</button>
        </view>
      </view>

      <!-- 完成报价弹窗 -->
      <view class="successPoup" v-if="successPoup">
        <view class="main">
          <view class="top">
            <image src="/static/img/accessory/success.png"></image>
          </view>
          <view class="title">报价提交成功</view>
          <view class="con">报价成功，等待买方查看</view>
          <view class="btn" @click="closPoupe"> 我知道了 </view>
        </view>
      </view>
    </view></page-loading
  >
</template>

<script src="./submitQuote.js"></script>
<style lang="scss" scoped>
@import './submitQuote.scss';
</style>
